﻿<template>
  <!-- 使用 v-if 进行条件渲染，如果 awesome 为 true，显示 Vue is awesome! -->
  <h1 v-if="awesome">Vue is awesome!</h1>

  <!-- v-else 作为 v-if 的 else 块，如果 awesome 为 false，显示 Oh no 😢 -->
  <h1 v-else>Oh no 😢</h1>

  <!-- 使用 v-else-if 作为 v-if 的 "else if" 块 -->
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>Not A/B/C</div>

  <!-- 在 <template> 上使用 v-if 来切换多个元素 -->
  <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>

  <!-- 使用 v-show 来根据 ok 的值显示或隐藏元素 -->
  <!-- v-show 不像 v-if 那样进行条件渲染。它总是会被渲染，只是通过 CSS 的 display 属性来控制显示与隐藏 -->
  <h1 v-show="ok">Hello with v-show!</h1>

  <!-- 按钮用于切换 awesome 的状态 -->
  <button @click="awesome = !awesome">Toggle Awesome</button>

  <!-- 按钮用于切换 ok 的状态，展示 v-show 与 v-if 的使用差异 -->
  <button @click="ok = !ok">Toggle Visibility (v-show/v-if)</button>
</template>

<script>
export default {
  data() {
    return {
      awesome: true,
      type: 'B',
      ok: true
    }
  }
}
</script>

<style>
/* 你可以在这里添加一些样式 */
</style>
